import { useEffect, useState } from 'react'
import { Drawer } from 'antd-mobile'

import NavBar from '@/components/NavBar'
import CommentItem from '../CommentItem'
import CommentFooter from '../CommentFooter'
import CommentInput from '../CommentInput'
import NoneComment from '@/components/NoneComment'

import styles from './index.module.scss'
import {
  AddCommentReplyResp,
  ArtComment,
  ArticleComment,
  ArticleCommentResponse
} from '@/store/data'
import { http } from '@/utils'

type Props = {
  // data 表示：要回复的评论
  data: ArtComment
  // art_id 表示：文章id
  art_id: string
  onClose: (commentId: string, total: number) => void
}

const Reply = ({ data, art_id, onClose }: Props) => {
  const { com_id, aut_name } = data
  const [commentOpen, setCommentOpen] = useState({
    visible: false,
    id: com_id
  })
  const [comment, setComment] = useState({} as ArticleComment)

  useEffect(() => {
    const loadDdata = async () => {
      const res = await http.get<ArticleCommentResponse>('/comments', {
        params: {
          type: 'c',
          source: data.com_id
        }
      })
      // console.log(res)
      setComment(res.data.data)
    }
    loadDdata()
  }, [data.com_id])

  // 展示评论窗口
  const onComment = () => {
    setCommentOpen({
      visible: true,
      id: com_id
    })
  }

  // 关闭评论窗口
  const onCloseComment = () => {
    setCommentOpen({
      ...commentOpen,
      visible: false
    })
  }

  // 对评论进行回复
  const onSendComment = async (content: string) => {
    // console.log('onSendComment', content, data.com_id, art_id)
    const res = await http.post<AddCommentReplyResp>('/comments', {
      target: data.com_id,
      content,
      art_id
    })

    setComment({
      ...comment,
      total_count: comment.total_count + 1,
      results: [res.data.data.new_obj, ...comment.results]
    })

    // 关闭回复（带有文本框的抽屉）窗口
    onCloseComment()
  }

  // 关闭对评论进行回复的抽屉
  // 此时，需要将当前评论的总数量传递给父组件
  const onBackToArticle = () => {
    onClose(data.com_id, comment.total_count)
  }

  const { results, total_count } = comment

  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        <NavBar className="transparent-navbar" onClick={onBackToArticle}>
          {total_count}条回复
        </NavBar>

        {/* 要回复的评论 */}
        <div className="origin-comment">
          <CommentItem type="origin" {...data} />
        </div>

        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {results?.length > 0 ? (
            results.map(item => (
              <CommentItem type="reply" key={item.com_id} {...item} />
            ))
          ) : (
            <NoneComment />
          )}
        </div>

        <CommentFooter
          placeholder="去评论"
          type="reply"
          onComment={onComment}
        />
      </div>

      {/* 回复文本框对应的抽屉 */}
      <Drawer
        className="drawer"
        position="bottom"
        style={{ minHeight: document.documentElement.clientHeight }}
        sidebar={
          <div className="drawer-sidebar-wrapper">
            {commentOpen.visible && (
              <CommentInput
                art_id={art_id}
                name={aut_name}
                onClose={onCloseComment}
                onComment={onSendComment}
              />
            )}
          </div>
        }
        open={commentOpen.visible}
        onOpenChange={onCloseComment}
      >
        {''}
      </Drawer>
    </div>
  )
}

export default Reply
